<!-- TrainReplacePhoto.html -->
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>更换头像</title>
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
	
	<link rel="stylesheet" href="../../css/base.css">
	<style type="text/css" media="screen">
		html,body{
			background-color: #F3F5F7;
		}
		.photoDiv{
			display: -webkit-flex;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.user_photo_style{
			width: 100%;
		}
	</style>
</head>
<body>
   <div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div> 
	<div class="base_navigation_bar base_style_color base_navigation_item_bar">
		<a class="base_left_item" href="#" onclick="backClick()">
			<img class="base_back_icon" src="../../image/icon_jiantou.png" alt="">
		</a>
		<span>更换头像</span>
		<a class="base_right_item" onclick="saveUserIconClick()">
			保存
		</a>
	</div>
	<div class="base_content_div photoDiv">
		<img id="userphoto" src="../../icon/icon_default_HeadPortrait.png" class="user_photo_style" alt="">
	</div>
	<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#" typeid="0">拍照</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="#" typeid="1">从相册选取</a>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#picture" typeid="2"><b>取消</b></a>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	// $(document).ready(function(){
	// 	$('#usericon').click(function(){
	// 		mui('#picture').popover('toggle');
	// 	});
	// });
	var userIconPath = '';
	apiready = function(){
		setupUserIcon();
	    setupContentHeight();
	    setupActionSheet();
	}
	function setupUserIcon(){
		var str = $api.getStorage('cfnetppusericon');
		$('#userphoto').attr('src', HeadPortraitIsNull(str));
	}
	function setupContentHeight(){
	    $('.user_photo_style').css('width', api.winWidth);
        // alert("height"+$('#userphoto').height());
		var winH = api.winHeight;
		var naviBarH = $('.base_navigation_bar').height();
		var contentH = winH - naviBarH;
		// alert("contentH"+contentH);
		$('.user_photo_style').height($('#userphoto').height());
		var imgHeight = $('.user_photo_style').height();
		var imgY = 0;
		if (contentH > imgHeight && imgHeight > 0) {
			imgY = (contentH - imgHeight)/2;
		}
	    $('.user_photo_style').css('margin-top', imgY);
	}
	function setupActionSheet(){
		$('#userphoto').click(function(){
			mui('#picture').popover('toggle');
		});
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var typeid = $(this).attr('typeid');
			if (typeid == 0) {//拍照
				mui('#picture').popover('toggle');
				api.getPicture({
				    sourceType: 'camera',
				    encodingType: 'jpg',
				    mediaValue: 'pic',
				    destinationType: 'url',
				    allowEdit: true,
				    quality: 50,
				    saveToPhotoAlbum: false
				}, function(ret, err){ 
				    if(ret){
				    	var photoPath = ret.data;
				    	if (photoPath != '') {
				    		$('#userphoto').attr('src', photoPath);
				    		userIconPath = photoPath;
				    		setupContentHeight();
				    	}
				    }else{
				    	// api.toast({
				    	//     msg: JSON.stringify(err)
				    	// });
				    }
				});
			}else if(typeid == 1){//从相册选择
				mui('#picture').popover('toggle');
				api.getPicture({
				    sourceType: 'album',
				    encodingType: 'jpg',
				    mediaValue: 'pic',
				    destinationType: 'url',
				    allowEdit: true,
				    quality: 50,
				    // targetWidth: 100,
				    // targetHeight: 100,
				    saveToPhotoAlbum: false
				}, function(ret, err){ 
				    if(ret){
				        var photoPath = ret.data;
				    	if (photoPath != '') {
				    		$('#userphoto').attr('src', photoPath);
				    		userIconPath = photoPath;
				    		setupContentHeight();
				    	}
				    }else{
				     //    api.toast({
				    	//     msg: JSON.stringify(err)
				    	// });
				    }
				});
			}
		});
	}
	function saveUserIconClick(){
		if (userIconPath == '') {
			api.toast({
			    msg: '请更换头像后再保存'
			});
			return;
		}
		uploadUserPhoto(function(fileurl){
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '正在修改头像...',
			    text: '',
			    modal: false
			});
			// var url_photo='http://apibase.cfnet.org.cn/index.php/user/user/photo';
			cfnetppPOST(urlPhoto, 
		    {
		      uid: $api.getStorage('cfnetppuid'),
		      jid: $api.getStorage('cfnetppjid'),
		      photourl: fileurl
		    },
		    false, 
		    function(data,status){
		    	api.hideProgress();
		    	 
		    	if (status == 'success') {
		    		if (data.status == 1) {
		    			api.toast({
				            msg: '修改头像成功'
				        });
				        $api.setStorage('cfnetppusericon', fileurl);
						api.sendEvent({
						    name: 'changeUserIconNotifi'
						});
						setTimeout(function(){
							backClick();
						}, 1000);
		    		}else{
		    			api.toast({
				            msg: '修改头像失败,请重试!'
				        });
		    		}
		    	}else{
		    		api.toast({
			            msg: '修改头像失败,请重试!'
			        });
		    	}
		    });
		});
	}
	function uploadUserPhoto(callback){
		api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '上传图片中...',
		    text: '请稍候...',
		    modal: false
		});
		var timecode = new Date().getTime();
		api.ajax({
		    url: 'http://boscache.cfnet.org.cn/uploadimg.php',
		    method: 'post',
		    timeout: 60,
		    dataType: 'json',
		    data: {
		        values: { 
		            token : MD5('cfnetbos'+timecode),
		            uid : $api.getStorage('cfnetppuid'),
		            timestamp : timecode
		        },
		        files: { 
		            Filedata: userIconPath
		        }
		    }
		}, function(ret, err) {
		    if (ret) {
		        if (ret.retmsg = 'succ') {
		        	callback(ret.fileurl);
		        }else{
		        	api.hideProgress();
		        	api.toast({
			            msg: '上传图片失败，请重试!'
			        });
		        }
		    } else {
		    	api.hideProgress();
		        api.toast({
		            msg: '上传图片失败，请重试!'
		        });
		    }
		});
	}
	function backClick(){
		api.closeWin();
	}  
</script>	
</html>